<template>
  <div class="container">
    <!-- 视频预览图 -->
    <div class="block-img">
      <img :src="data.poster" v-if="!isShow" alt>

      <span class="btn" @click="openVideo"></span>
      <span class="special" @click="enterSpecial(data.id)"></span>
    </div>

    <!-- 视频播放图 -->
    <transition name="fade">
      <div class="video-wrap" v-if="isShow" @click="closeVideo">
        <video
          id="Flash1"
          :poster="data.poster"
          :autoplay="data.autoplay"
          :loop="data.loop"
          preload="auto"
          playsinline="true"
          x-webkit-airplay="allow"
          x5-video-player-type="h5"
          x5-video-orientation="landscape"
          webkit-playsinline="webkit-playsinline"
        >
          <source :src="data.source" type="video/mp4">
        </video>
      </div>
    </transition>
          
  <!-- webkit-playsinline="true" -->
    <!-- @click.stop = "zi" -->
    <!--       controls="controls" -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: false
    };
  },

  props: {
    data: Object
  },

  methods: {
    enterSpecial(e) {
      console.log('跳转专区' + e);
      
      this.$navtiveUtils.jump2special(e);
    },
    openVideo() {
      console.log(1111)
      this.isShow = true;
    },

    closeVideo() {
      this.isShow = false;
    }
  }
};
</script>
<style lang='less' scoped>
img {
  display: block;
}
.video-wrap {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: rgba(0, 0, 0, 1);
  video {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.block-img {
  position: relative;
  .btn {
    position: absolute;
    z-index: 6;
    top: .2rem;
    right: .8rem;
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
  }
  .special {
    position: absolute;
    top: 0rem;
    left: 0rem;
    display: inline-block;
    width: 5.1rem;
    height: 2.6rem;
  }
}
</style>